/*----------------progress.less(start)--------------*/
progress {
	display:block;
    height:@px10;
    border-width:@px1;
	border-style:solid;
	border-radius:@px5;
	overflow:hidden;

	color:@border; /*IE10*/
    border-color:@border;  
    background-color:transparent;
}
progress::-moz-progress-bar {
	background:@primary-bg;
}
progress::-webkit-progress-bar {
	background:transparent;
}
progress::-webkit-progress-value  {
	background-color:@primary-bg;
}

//进度条容器
.progress {
	position: relative;
	padding: @px2;

	background-color:@progress-bg;
}
//进度条
.progress-bar {
	display: block;
	overflow: hidden;
	position: relative;
	-webkit-animation: progressexpand 1s linear;

	height: @px12;
    margin: 0;
    box-sizing: border-box;
    border-width: @px1;
    border-style: solid;

	background-color:@primary-bg;
	border-color: transparent;

	&.theme-1{
	    background-color:#32d2ea;
	    border-color: #36b0cf;
	}
	&.theme-2{
	    background-color:#6fb1ff;
	    border-color: #439fd9;
	}
	&.theme-3{
	    background-color:#ff9a5c;
	    border-color: #e57430;
	}
	&.theme-4{
	    background-color:#b79fff;
	    border-color: #8c6bf4;
	}
	&.theme-5{
	    background-color:#61e264;
	    border-color: #43c847;
	}
}
.progress-bar
{
	//3D样式
	&.threed {
		border-width: 0;
		box-shadow: inset 0 @px2 @px9  rgba(255,255,255,0.3), inset 0 -@px2 @px6 rgba(0,0,0,0.4);
	}
	//斑马条
	&.striped{
		&:after{
			content:"";
			position:absolute;
			top:0;
			left:0;
			bottom:0;
			right:0;
			background-image:linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
			background-size:@px50 @px50;
			overflow:hidden;
		}
		&.animated:after{
			animation: movestripes 2s linear infinite;
			-webkit-animation: movestripes 2s linear infinite;
		}
	}
}

//进度条文字
.progress-text {
	font-size: @px12;
	color:white;
	&.left,&.right,&.center{
		position:absolute;
		top:50%;
		-webkit-transform:translateY(-50%);
	}
	&.left{
		left:@px12;
	}
	&.right{
		right:@px12;
	}
	&.center{
		left:50%;
		-webkit-transform:translate(-50%,-50%);
	}
}

@-webkit-keyframes movestripes {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: @px50 @px50;
	}
}
@-webkit-keyframes progressexpand {
	0% { 
		width: 0;
	}
}

//进度条后面的标签文字
.progressbox-content {
    display: -webkit-box;
    -webkit-box-align: center;
    padding: @px8 @px12;
}
.progressbox-content .progress {
    border-radius: @px40;
    -webkit-box-flex: 1.0;
}
.progressbox-content label {
    display: block;
    height: @px16;
    line-height: @px16;
    width: @px50;
    text-align: center;
    
    border-radius: @px20;
    font-size: @px12;
    font-weight: bold;
    margin-left: @px8;
    min-width: @px56;
    color: #494949;
    background-color: @progress-bg;
}
/*----------------progress.less(end)--------------*/